{extend name="shop/blue/Login/registerBase"}
{block name="main"}
<style type="text/css">
.reg-wrap-con{
	min-height: 300px;
}
.form-horizontal .form-group label.input-left{
	width: 156px;
	min-height: 40px;
}
</style>
<div class="header w990">
	<div class="logo-info">
		<a href="{:__URL('SHOP_MAIN')}" class="web-logo-a"><img alt="logo" src="{:__IMG($web_info['logo'])}" class="weblogo"/></a>
	</div>
</div>
<div class="reg-content">
	<div class="w990">
		<div class="reg-form">
			<div class="reg-con">
				<div class="reg-type">
					<ul class="clearfix">
						<li class="active"><a href="">完善信息</a></li>
						<li><a href="{:__URL('SHOP_MAIN/login/bindAccount')}">绑定账号</a></li>
					</ul>
				</div>
				<div class="reg-wrap">
					<div class="reg-wrap-con" style="background: {$register_adv['background']} url({:__IMG($register_adv['adv_image'])}) no-repeat right 60px;background-size: 420px 220px">
						<form class="form-horizontal" action="javascript:;" method="post">
							<!-- 用户名 -->
							<div class="form-group form-group-spe">
								<label for="" class="input-left">
									<span class="spark">*</span>
									<span>用户名：</span>
								</label>
								<div class="form-control-box">
									<input type="text" id="username" class="form-control" name="username" placeholder="{:lang('please_enter_your_user_name')}" />
									<span id="usernameyz"></span>
									<input type="hidden" value="{:lang('non_existent')}" id="isset_username"/>
								</div>
							</div>
							<!-- 密码 -->
							<div class="form-group form-group-spe">
								<label for="" class="input-left">
									<span class="spark">*</span>
									<span>{:lang('password')}：</span>
								</label>
								<div class="form-control-box">
									<input type="password" id="pass" class="form-control" name="qrpassword" autocomplete="off" placeholder="{:lang('please_enter_confirmation_password')}">
									<span id="qrrepass"></span>
								</div>
								<div class="invalid"></div>
							</div>
							<!-- 确认密码 -->
							<div class="form-group form-group-spe">
								<label for="" class="input-left">
									<span class="spark">*</span>
									<span>{:lang('member_confirm_password')}：</span>
								</label>
								<div class="form-control-box">
									<input type="password" id="repass" class="form-control" name="qrpassword" autocomplete="off" placeholder="{:lang('please_enter_confirmation_password')}">
									<span id="qrrepass"></span>
								</div>
								<div class="invalid"></div>
							</div>
							<!-- 验证码 -->
							{if condition = "$login_verify_code['pc'] == 1"}
							<div class="form-group form-group-spe">
								<label for="verify_code" class="input-left">
									<span class="spark">*</span>
									<span>验证码：</span>
								</label>
								<div class="form-control-box">
									<input type="text" id="verify_code" class="form-control" name="qrpassword" autocomplete="off" placeholder="请输入验证码" style="width: 120px;" maxlength="4">
									<label class="img" style="margin-left: 5px"> 
										<img class="verifyimg" src="{:__URL('SHOP_MAIN/captcha')}" onclick="this.src='{:__URL('SHOP_MAIN/captcha?tag=1')}'+'&send='+Math.random()"  alt="captcha" style="vertical-align: middle; cursor: pointer; height: 35px;" /> 
									</label>	
									<span id="code_error"></span>
								</div>
								<div class="invalid"></div>
							</div>
							{/if}
							<!-- 按钮 -->
							<div class="form-group form-group-spe">
								<label for="" class="input-left"></label>
								<div class="form-control-box">
									<button class="loginBind-btn" onclick="perfectInfo();">完善信息</button>
									<button class="perfectInfo-btn" onclick="location.href='{:__URL('SHOP_MAIN/login/bindAccount')}'">已有账号</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>	
		</div>
	</div>
</div>
<input type="hidden" value="{:lang('non_existent')}" id="isset_username"/>

<script type="text/javascript">
$(function(){
	$("#username").change(function(){
		if($(this).val().length >= 3 && $(this).val().length <=16 && $(this).val()!=''){
			var user_name = $(this).val();
			$("#isset_username").attr("value","1");
			$.ajax({
				type: "get",
				url:"{:__URL('SHOP_MAIN/login/register')}",
				data: { "username" : user_name },
				success: function(data){
					if(data){
						$("#username").focus().css("border","1px solid red");
						layer.msg("{:lang('user_name_already_exists')}");
						$("#isset_username").attr("value","2");
					}else{
						$("#isset_username").attr("value","1");
						$("#username").css("border","1px solid #ccc");
					}
				} 
			});
		}
	});
	$("#pass").change(function(){
		var password = $("#pass").val();
		var password_length = "{$reg_config['pwd_len']}";
		if(password.length < password_length){
			$("#pass").trigger("focus").css("border","1px solid red");
			layer.msg("密码最小长度为{$reg_config['pwd_len']}");
			return false;
		}else{
			$("#pass").css("border","1px solid #ccc");
		}
	})
	$("#repass").change(function(){
		var password = $("#pass").val();
		var repass = $("#repass").val();
		if(!(repass == password)){
			$("#repass").trigger("focus").css("border","1px solid red");;
			layer.msg("两次密码输入不相同");
			return false;
		}else{
			$("#password").css("border","1px solid #ccc");;
		}
	})
})

var is_sub = false;
function perfectInfo(){
	var username = $("#username").val();
	var password = $("#pass").val();
	var repass = $("#repass").val();
	var verify_code = $("#verify_code").val();
	var isset_username = $("#isset_username").val();
	if(!(username.length >= 3 && username.length <=16)){
		$("#username").trigger("focus").css("border", "1px solid red");
		layer.msg("{:lang('user_name_length')}");
		return false;
	}else{
		$("#username").css("border", "1px solid #ccc");
	}

	var is_username_true = verifyUsername(username);
	
	if(is_username_true > 0){
		return false;
	}

	if(isset_username == "2"){
		$("#username").trigger("focus").css("border", "1px solid red");
		layer.msg("{:lang('user_name_already_exists')}");
		return false;
	}else{
		$("#username").css("border", "1px solid #ccc");
	}

	var is_password_true = verifyPassword(password);
	if(is_password_true > 0){
		return false;
	}
	if(!(repass == password)){
		$("#repass").trigger("focus").css("border", "1px solid red");
		layer.msg("{:lang('two_password_not_same')}");
		return false;
	}else{
		$("#repass").css("border", "1px solid #ccc");
	}
	// 验证码
	{if condition = "$login_verify_code['pc'] == 1"}
	if(verify_code == ""){
		$("#verify_code").focus().css("border", "1px solid red");
		layer.msg("请输入验证码");
		return false;
	}else{
		$("#verify_code").css("border", "1px solid #ccc");
	}
	{/if}
	if(is_sub) return;
	is_sub = true;

	$.ajax({
		type : "post",
		url : "{:__URL('SHOP_MAIN/login/perfectInfo')}",
		data : {
			"username" : username,
			"password" : password,
			"captcha" : verify_code
		},
		success : function(data){
			if(data["code"] > 0){
				layer.msg(data['message']);
				setTimeout(function(){
					location.href = data["url"];
				},1000)
			}else{
				is_sub = false;
				layer.msg(data['message']);
			}
		}
	})
}

function verifyUsername(username){
	var is_true =0;
	if(/.*[\u4e00-\u9fa5]+.*$/.test(username) ){
		is_true = 1;
		$("#username").trigger("focus");
		$('#username').css("border","1px solid red");
		layer.msg("用户名不能包含中文字符");
		return is_true;
	}
	if(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(username) ){
		is_true = 1;
		$("#username").trigger("focus");
		$('#username').css("border","1px solid red");
		layer.msg("{:lang('user_name_canno_be_mailbox')}");
		return is_true;
	}
	if(/^1(3|4|5|7|8)\d{9}$/.test(username) ){
		is_true = 1;
		$("#username").trigger("focus");
		$('#username').css("border","1px solid red");
		layer.msg("{:lang('user_name_canno_be_phone')}");
		return is_true;
	}
	var username_verify = "{$reg_config['name_keyword']}";
	var usernme_verify_array = new Array();
	if($.trim(username_verify) != "" && username_verify != undefined){
		usernme_verify_array  = username_verify.split(",");
	}
	usernme_verify_array.push(",");
	usernme_verify_array.push(" ");
	$.each(usernme_verify_array,function(k,v){
		//if($.trim(v) != ""){
			if(username.indexOf(v) >= 0){
				is_true = 1;
				$("#username").trigger("focus");
				$('#username').css("border","1px solid red");
				layer.msg("{:lang('username_cannot_includ')}'"+v+"'{:lang('such_characters')}");
				return false;
			}			
		//}
	});
	return is_true;
}
//验证密码
function verifyPassword(password){
	var is_true = 0;
	var min_length_str = "{$reg_config['pwd_len']}";
	if($.trim(min_length_str) != "" ){
		var min_length = parseInt(min_length_str);	
	}else{
		var min_length = 5;
	}
	if($.trim(password) == ""){
		is_true = 1;
		$("#pass").trigger("focus");
		$("#pass").css("border","1px solid red");
		layer.msg("{:lang('password_cannot_empty')}");
		return is_true;
	}else{
		$("#pass").css("border","1px solid #ccc");
	}
	if(min_length  > 0){
		if(password.length < min_length){
			is_true = 1;
			$("#pass").trigger("focus");
			$("#pass").css("border","1px solid red");
			layer.msg("{:lang('minimum_password_length')}"+min_length);
			return is_true;
		}else{			
			$("#pass").css("border","1px solid #ccc");
		}
	}else{
		
	}
	
	//验证汉字
	if(/.*[\u4e00-\u9fa5]+.*$/.test(password) ){
		is_true = 1;
		$("#pass").trigger("focus");
		$("#pass").css("border","1px solid red");
		layer.msg("{:lang('password_cannot_includ_chinese_characters')}!");
		return is_true;
	}else{			
		$("#pass").css("border","1px solid #ccc");
	}
	var regex_str = "{$reg_config['pwd_complexity']}";
	if($.trim(regex_str) != "" && regex_str != undefined){
		//验证是否包含数字
		if(regex_str.indexOf("number") >= 0){
			var number_test =  /[0-9]/;
			if(!number_test.test(password)){
				is_true = 1;
				$("#pass").trigger("focus");
				$("#pass").css("border","1px solid red");
				layer.msg("{:lang('password_must_contain_numbers')}!");
				return is_true;
			}else{
				$("#pass").css("border","1px solid #ccc");
				$("#yzpassword").css("color","red").text("");
			}	
		}
		//验证是否包含小写字母
		if(regex_str.indexOf("letter") >= 0){
			var letter_test =  /[a-z]/;
			if(!letter_test.test(password)){
				is_true = 1;
				$("#pass").trigger("focus");
				$("#pass").css("border","1px solid red");
				layer.msg("{:lang('password_must_have_lowercase_letters')}!");
				return is_true;
			}else{
				$("#pass").css("border","1px solid #ccc");
			}	
		}
		//验证是否包含大写字母
		if(regex_str.indexOf("upper_case") >= 0){
			var upper_case_test =  /[A-Z]/;
			if(!upper_case_test.test(password)){
				is_true = 1;
				$("#pass").trigger("focus");
				$("#pass").css("border","1px solid red");
				layer.msg("{:lang('password_must_have_uppercase_letters')}!");
				return is_true;
			}else{
				$("#pass").css("border","1px solid #ccc");
			}	
		}
		//验证是否包含特殊字符
		if(regex_str.indexOf("symbol") >= 0){
			var symbol_test =  /[^A-Za-z0-9]/;
			if(!symbol_test.test(password)){
				is_true = 1;
				$("#pass").trigger("focus");
				$("#pass").css("border","1px solid red");
				layer.msg("{:lang('password_must_contain_symbols')}!");
				return is_true;
			}else{
				$("#pass").css("border","1px solid #ccc");
			}	
		}
	}
	return is_true;
}

</script>
{/block}